<template>
  <div class="test-root">
    <div class="container" ref="AvatorWrapper" @mouseenter="mouseEnter($event)" @mouseleave="mouseLevel"
      @mousemove="mouseMove($event)">
      <img src="@/assets/imgs/鲁班嘉文.png" class="inner" ref="AcatorInner" :style="innerStyle">
    </div>

    <div style="margin-top: 10px;">
      <el-switch inline-prompt size="default" v-model="switchValue" active-text="开启开启" inactive-text="关闭关闭" />
      <el-input v-model="xssInput"></el-input>
      <div v-html="xssHandler(xssInput)"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const switchValue = ref(false)
const innerStyle = ref<any>({})
const AvatorWrapper = ref()
const AcatorInner = ref();

const xssInput = ref("")

const xssHandler = (value: string): string => {
  value = value.replace("<", "&#60;");
  value = value.replace(">", "&#62;");
  console.log(value);

  return value;
}

var counter = 0;
var updateRate = 10;
var isTimeToUpdate = () => {
  return counter++ % updateRate === 0;
};

// Mouse 
const mouse = {
  _x: 0,
  _y: 0,
  x: 0,
  y: 0,
  updatePosition: function (event: any) {
    var e = event || window.event;
    this.x = e.clientX - this._x;
    this.y = (e.clientY - this._y) * -1;
  },
  setOrigin: function (e?: any) {
    console.log('origin: ' + this._x + ", " + this._y);
    this._x = e?.offsetLeft + Math.floor(e?.offsetWidth / 2);
    this._y = e?.offsetTop + Math.floor(e?.offsetHeight / 2);
  },
  show: function () { return '(' + this.x + ', ' + this.y + ')'; }
}


const mouseEnter = (event: any) => {
  console.log('mouseEnter');
  update(event);
}

const mouseLevel = () => {
  console.log('mouseLevel');
  innerStyle.value = {};
}

const mouseMove = (event: any) => {
  if (isTimeToUpdate()) {
    update(event);
  }
}

const update = (event: any) => {
  mouse.updatePosition(event);
  updateTransformStyle(
    (mouse.y / AcatorInner?.value?.offsetHeight / 1).toFixed(2),
    (mouse.x / AcatorInner?.value?.offsetWidth / 1).toFixed(2)
  );
};

const updateTransformStyle = (x: any, y: any) => {
  console.log(x, y);
  var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
  innerStyle.value.transform = style;
};

onMounted(() => {
  mouse.setOrigin(AvatorWrapper?.value);
})

</script>

<style scoped lang="scss">
.test-root {
  @include box(100%, 100%);
  // background-color: rgb(220, 220, 220);
  padding: 100px;

  .container {
    @include box(400px, 400px);
    perspective: 40px;
  }

  .inner {
    @include box(400px, 400px);
    background-color: white;
    transition: 0.3s;
    // transform: rotateX(1deg) rotateY(1deg);
  }



}
</style>